<template>
  <div class="online-sale">
    <div class="naviga">数据采集&nbsp;>&nbsp;市场调研</div>
    <div class="border-r margin-top">
      <div class="el-tabs__nav-wrap is-top">
        <div class="el-tabs__nav-scroll">
          <div role="tablist" class="el-tabs__nav" style="transform: translateX(0px);">
            <div  class="el-tabs__item is-top" :class="tag?'is-active':''" @click="tag=!tag">列表视图</div>
            <div  class="el-tabs__item is-top" :class="tag?'':'is-active'" @click="tag=!tag">标签查看</div>
          </div>
        </div>
      </div>
      <div class="el-tabs__content" v-show="tag">
        <div class="col-xs-12 margin-top">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="调研时间">
              <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                @change="changeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="调研类型">
              <el-select v-model="formInline.researchType" placeholder="调研类型">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in typeOptions" :label="items.entry" :value="items.entry"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调研城市">
              <el-select v-model="formInline.city" placeholder="调研城市">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in cityOptions" :label="items" :value="items"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无图片">
              <el-select v-model="formInline.picturesMark" placeholder="有无图片">
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="有" value="1"></el-option>
                <el-option label="无" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="el-tabs__content" v-show="!tag">
        <div class="col-xs-12 margin-top">
          <el-form :inline="true" :model="formInline2" class="demo-form-inline">
            <el-form-item label="调研时间">
              <el-date-picker
                v-model="date2"
                value-format="yyyy-MM-dd"
                @change="changeDate2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="调研类型">
              <el-select v-model="formInline2.researchType" placeholder="调研类型">
                <el-option label="全部" value="ALL"></el-option>
                <el-option v-for="items in typeOptions" :label="items.entry" :value="items.entry"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有无图片">
              <el-select v-model="formInline2.picturesMark" placeholder="有无图片">
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="有" value="1"></el-option>
                <el-option label="无" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="tagList">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="border-r margin-top" v-show="!tag">
        <span class="el-tag-custom" v-for="(items,index) in tagTable" :class="'el-tag-'+index%4"
              @click="showTagType(items.researchTag)"
        >{{items.researchTag}}<span class="pull-right" style="color: #409EFF">{{items.id}}条</span></span>
      </div>
    </div>
    <div class="margin-top col-xs-12" v-show="tag">
      <div class="charts ">
        <div class="charts-box">
          <div class="chart chart-bg-1">
            {{topData.ResearchTotal || '暂无数据'}}
          </div>
          <div class="chart-des">调研累计数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-2">
            {{topData.NoReadCnt || '暂无数据'}}
          </div>
          <div class="chart-des">未读数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-3">
            {{PictureCnt || '暂无数据'}}
          </div>
          <div class="chart-des">图片数量</div>
        </div>
        <div class="charts-box">
          <div class="chart chart-bg-4">
            {{topData.CityCnt || '暂无数据'}}
          </div>
          <div class="chart-des">地区数量</div>
        </div>
        <div class="charts-box">
          <el-button type="primary" plain @click="addRe">+&nbsp;添加调研</el-button>
        </div>

      </div>
    </div>
    <div class="border-r margin-top" v-show="tag">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="调研标题">
        </el-table-column>
        <el-table-column
          prop="researchTime"
          label="调研时间">
        </el-table-column>
        <el-table-column
          prop="researchType"
          label="调研类型">
        </el-table-column>
        <el-table-column
          prop="city"
          label="调研城市">
        </el-table-column>
        <el-table-column
          prop="picturesMark"
          label="有无图片">
        </el-table-column>
        <el-table-column
          prop="researcher"
          label="调研者">
        </el-table-column>
        <el-table-column
          prop="readMark"
          label="阅读状态">
        </el-table-column>
        <el-table-column
          prop=""
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row.researchId)">查看详情</el-button>
            <el-button @click="deleteData(scope.row.researchId)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px"
        background
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--模态框用以显示增加调研-->
    <div class="modal fade" id="classManage">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">新增调研</div>
          </div>
          <div class="modal-body">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="调研标题" prop="title">
                      <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="调研内容" prop="researchText">
                      <el-input v-model="ruleForm.researchText" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="调研类型" prop="researchType">
                      <el-select v-model="ruleForm.researchType" placeholder="调研类型">
                        <el-option v-for="items in typeOptions" :label="items.entry" :value="items.entry"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="调研城市" prop="city">
                      <el-select v-model="ruleForm.city" placeholder="调研类型">
                        <el-option v-for="items in cityOptions" :label="items" :value="items"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="标签" prop="researchTagList">
                      <el-input v-model="ruleForm.researchTagList" placeholder="用逗号区分多个标签"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" prop="researchPictureList">
                      <div class="overflow">
                        <div class="avatar-box" v-for="(items,index) in imageUrl" >
                          <img :src="'http://'+items" class="avatar">
                          <div class="text-center">
                            <el-button round class="margin-top" @click="removeImg(index)">移除</el-button>
                          </div>
                        </div>
                        <el-upload
                          class="avatar-uploader"
                          action="/file/uploadFile"
                          name="file"
                          :data="uploadConfig"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          accept="image/png,image/jpg,image/jpeg"
                          :before-upload="beforeAvatarUpload">
                          <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--模态框显示查看详情-->
    <div class="modal fade bs-example-modal-lg" id="detail">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">数据采集&nbsp;>&nbsp;市场调研&nbsp;>&nbsp;查看详情</div>
          </div>
          <div class="modal-body" style="background-color: #F6F6F6">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <div class="title">
                    市场调研内容详情-{{detail.researchType}}
                  </div>
                  <div style="padding-left: 15px;padding-right: 15px;padding-top: 15px">
                    <h2>{{detail.title}}</h2>
                    <div>
                      <el-tag type="info" style="margin-right: 5px;margin-bottom: 5px" v-for="items in detail.tagList">{{items.researchTag}}</el-tag>
                      <el-button size="mini" @click="addTag">+&nbsp;&nbsp;添加标签</el-button>
                      <el-button size="mini" @click="addTag2">+&nbsp;&nbsp;新增标签</el-button>
                      <el-button size="mini" type="primary" plain class="pull-right" @click="edit"><i class="el-icon-edit"></i>编辑</el-button>
                    </div>
                    <div>
                      <div class="research-box">
                        <span class="left_lable">调研人:</span>
                        <span>{{detail.researcher}}</span>
                      </div>
                      <div class="research-box">
                        <span class="left_lable">调研时间:</span>
                        <span>{{detail.dataTime}}</span>
                      </div>
                    </div>
                    <p style="padding-bottom: 15px">{{detail.researchText}}</p>
                    <div class="avatar-box" v-for="(items,index) in detail.pictureList" >
                      <img :src="'http://'+items.pictureR" class="avatar">
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--模态框显示选择新增标签-->
    <div class="modal fade bs-example-modal-lg" id="newTag">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <div class="naviga">选择标签</div>
        </div>
        <div class="modal-body" style="background-color: #F6F6F6">
          <div class="row">
            <el-col :span="24">
              <div class="border-r">
                <el-checkbox-group v-model="newtagList">
                  <el-checkbox  v-for='items in tagTable2' :label="items" :key="items">{{items}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </div>
        </div>
        <div class="modal-footer">
          <div class="text-center">
            <el-button type="primary" @click="saveEdit2()">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
    <!--模态框用以显示编辑调研-->
    <div class="modal fade" id="edit">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="naviga">编辑调研</div>
          </div>
          <div class="modal-body">
            <div class="row">
              <el-col :span="24">
                <div class="border-r">
                  <el-form :model="ruleForm2"  ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                    <div class="research-box2">
                      <span class="left_lable">调研标题:</span>
                      <span>{{detail.title}}</span>
                    </div>
                    <el-form-item label="调研内容" prop="researchText">
                      <el-input v-model="ruleForm2.researchText" type="textarea"></el-input>
                    </el-form-item>
                    <div class="research-box2">
                      <span class="left_lable">调研类型:</span>
                      <span>{{detail.researchType}}</span>
                    </div>
                    <div class="research-box2">
                      <span class="left_lable">调研城市:</span>
                      <span>{{detail.city}}</span>
                    </div>
                    <div class="research-box2">
                      <span class="left_lable">标签:</span>
                      <el-tag type="info" style="margin-right: 5px;margin-bottom: 5px" v-for="items in detail.tagList">{{items.researchTag}}</el-tag>
                    </div>
                    <el-form-item label="图片" prop="researchPictureList"  class="margin-top">
                      <div class="overflow">
                        <div class="avatar-box" v-for="(items,index) in imageUrl2" >
                          <img :src="'http://'+items" class="avatar">
                          <div class="text-center">
                            <el-button round class="margin-top" @click="removeImg2(index)">移除</el-button>
                          </div>
                        </div>
                        <el-upload
                          class="avatar-uploader"
                          action="/file/uploadFile"
                          name="file"
                          :data="uploadConfig"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess2"
                          accept="image/png,image/jpg,image/jpeg"
                          :before-upload="beforeAvatarUpload">
                          <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </div>
          </div>
          <div class="modal-footer">
            <div class="text-center">
              <el-button type="primary" @click="saveEdit()">保存</el-button>
              <button type="button" class="el-button el-button--info" data-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--绝对定位的框，用以显示标签分类-->
    <div class="fix-div" v-show="show">
      <div class="naviga" @click="show=false">
        <div class="pull-left" style="cursor: pointer"><i class="el-icon el-icon-arrow-left" ></i>标签查看</div>
        <div style="text-align: center">{{typeTag}}</div>
      </div>
      <div class="border-r margin-top">
        <el-table
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="researchTime"
            label="调研时间">
          </el-table-column>
          <el-table-column
            prop="researchType"
            label="调研类型">
          </el-table-column>
          <el-table-column
            prop="city"
            label="调研城市">
          </el-table-column>
          <el-table-column
            prop="picturesMark"
            label="有无图片">
          </el-table-column>
          <el-table-column
            prop="researcher"
            label="调研者">
          </el-table-column>
          <el-table-column
            prop="readMark"
            label="阅读状态">
          </el-table-column>
          <el-table-column
            prop=""
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="showDetail(scope.row.researchId)">查看详情</el-button>
              <el-button @click="deleteData(scope.row.researchId)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style  lang="less" scoped>
  .overflow{
    width: 100%;
    height: 235px;
    overflow-x: auto;
  }
  .el-tabs__item.is-active{
    border-bottom: 2px solid #409eff;
  }
  .charts {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 5px;
    padding: 15px;
  }

  .charts-box {
    margin-right: 15px;
  }
  .chart {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    text-align: center;
    line-height: 110px;
    font-size: 18px;
    color:#868686;
    z-index: 1;
    display: block;

  &::after {
     content: '';
     display: block;
     position: absolute;
     top: 10%;
     left: 10%;
     width: 80%;
     height: 80%;
     background: #fff;
     border-radius: 50%;
     z-index: -1;
   }
  &:hover{
     transform: scale(1.1);
     color: #000;
   }
  }
  .chart-des{
    margin-top: 10px;
    display: block;
    text-align: center;
  }
  .chart-bg-1 {
    background: linear-gradient(left bottom, #fb9292, #f5da63);
    box-shadow: 0 0 20px #fb9292;
  }

  .chart-bg-2 {
    background: linear-gradient(left bottom, #5bd77b, #d7e770);
    box-shadow: 0 0 20px #5bd77b;
  }

  .chart-bg-3 {
    background: linear-gradient(left bottom, #40c6cf, #4df195);
    box-shadow: 0 0 20px #40c6cf;
  }

  .chart-bg-4 {
    background: linear-gradient(left bottom, #5ed77b, #d7e76f);
    box-shadow: 0 0 20px #5ed77b;
  }
  .title{
    line-height: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-left: 15px;
  }
  .research-box{
    width: 200px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-right: 15px;
  }
  .research-box2{
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    margin-right: 15px;
  }
  .el-tag-custom {
    height: 45px;
    line-height: 45px;
    width: 150px;
    margin-right: 15px;
    margin-bottom: 15px;
    color: black;
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(64,158,255,.2);
    white-space: nowrap
  }
  .el-tag-0{
    background-color: #F7DEE3;
  }
  .el-tag-1{
    background-color: #E3E2F3;
  }
  .el-tag-2{
    background-color: #D1ECF0;
  }
  .el-tag-3{
    background-color: #F6F4DB;
  }
  .fix-div{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 999;
    background-color: whitesmoke;
    padding-bottom: 15px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    background-color: #00a4eb;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .avatar-box{
    width: 178px;
    height: 240px;
    display: inline-block;
    margin-left: 10px;
  }
  .left_lable{
    width: 100px;
    display: inline-block;
    padding-right: 12px;
    color: rgba(0,0,0,0.8);
    text-align: right;
  }
  .el-checkbox{
    margin-left: 30px!important;
  }
</style>
<script type="es6">
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();}
        },
        tag:true,
        //提交时间
        date:  [],
        date2:  [],
        formInline: {
          startTime:'',
          endTime:'',
          researchType: 'ALL',
          city: 'ALL',
          picturesMark: 'ALL',
          pageNo:1,
          pageSize:10
        },
        formInline2: {
          startTime:'',
          endTime:'',
          researchType: 'ALL',
          picturesMark: 'ALL'
        },
        total: 0,
        pSize: 10,
        currentPage: 1,
        cityOptions:[],
        typeOptions:'',
        topData:{
          ResearchTotal:0,
          NoReadCnt:0,
          CityCnt:0,
          PictureCnt:0
        },
        PictureCnt:"",
        tableData: [],
        ruleForm: {
          title: '',
          researchText:'',
          researchType:'',
          city:'',
          researchTagList:'',
          researchPictureList:''
        },
        rules: {
          title: [
            { required: true, message: '请输入调研标题', trigger: 'blur' }
          ],
          researchText: [
            { required: true, message: '请输入调研内容', trigger: 'blur' }
          ],
          researchType: [
            { required: true, message: '请选择调研类型', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '请选择调研城市', trigger: 'blur' }
          ],
          researchTagList: [
            { required: true, message: '请输入标签', trigger: 'blur' }
          ]
        },
        ruleForm2: {
          researchId: '',
          researchText:'',
          updatePicture:'NO',
          researchPictureList:'',
          updateTag:'NO',
          researchTagList:''
        },
        detail:{},
        tagTable:[],
        tagTable2:[],
        newtagList:[],
        show:false,
        tableData2:[],
        typeTag:"",
        imageUrl:[],
        imageUrl2:[],
        uploadConfig: {
          type:'Img'
        },
        id:''
      }
    },
    mounted(){
      this.setDate()
      this.getCityList()
      this.getTypeList()
    },
    methods: {
      //页数
      handleSizeChange(val) {
        this.pSize = val;
        this.formInline.pageSize= val;
        this.dataList();
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.formInline.pageNo= val
        this.dataList();
      },
      // 获取当前日期和当前日期前一个月
      formatDate(date) {
        var month=Number(date.getMonth()) + 1
        if(month<10){
          month='0'+month
        }
        return date.getFullYear()+'-'+month+'-'+date.getDate();
      },
      setDate(){
        var nowdate = new Date();
        var startTime=this.formatDate(new Date(nowdate - 30*24*3600*1000))
        var endTime=this.formatDate(nowdate)
        this.formInline.startTime=this.formInline2.startTime=startTime
        this.formInline.endTime= this.formInline2.endTime=endTime
        this.date=[startTime,endTime]
        this.date2=[startTime,endTime]
        this.getData();
        this.tagList();
        this.oneTag()
      },
      getData(){
        this.getDataTop()
        this.getDataTop2()
        this.dataList()
      },
      // 获取城市列表
      getCityList(){
        this.$http.post(this.GLOBAL.host,{
          method:'getOnlineSalesCity',
          query:{
            province:''
          }
        })
          .then((res) => {
            this.cityOptions=res.data.data;
          })
          .catch((error) => {

          });
      },
      // 获取到调研类型
      getTypeList(){
        this.$http.post(this.GLOBAL.host,{
          method:'getDictionary',
          query:{
            cnName:'数据采集_调研类型'
          }
        })
          .then((res) => {
            this.typeOptions=res.data.data.dictionary;
          })
          .catch((error) => {

          });
      },
      // 时间范围改变时
      changeDate(val){
        this.formInline.startTime=val[0]
        this.formInline.endTime=val[1]
      },
      changeDate2(val){
        this.formInline2.startTime=val[0]
        this.formInline2.endTime=val[1]
      },
      // 3.2.调研累计、未读、地区数量
      getDataTop(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5020',
          query:this.formInline
        })
          .then((res) => {
            this.topData.ResearchTotal=res.data.data.ResearchTotal;
            this.topData.NoReadCnt=res.data.data.NoReadCnt;
            this.topData.CityCnt=res.data.data.CityCnt;
          })
          .catch((error) => {
            this.topData={
              ResearchTotal:0,
              NoReadCnt:0,
              CityCnt:0,
              PictureCnt:0
            }
          });
      },
      // 3.3.图片数量
      getDataTop2(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5021',
          query:this.formInline
        })
          .then((res) => {
            this.topData.PictureCnt=res.data.data.PictureCnt;
          })
          .catch((error) => {
            this.topData.PictureCnt=0
          });
      },
      // 获取到数据列表
      dataList(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5010',
          query:this.formInline
        })
          .then((res) => {
            this.tableData=res.data.data.list;
            this.total=res.data.data.total
          })
          .catch((error) => {
            this.tableData=[]
            this.total=0
          });
      },
      // 增加调研
      addRe(){
        $('#classManage').modal('show')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRe()
          } else {
            return false;
          }
        });
      },
      // 保存调研内容
      saveRe(){
        var imgUrlList=''
        for(var i in this.imageUrl){
          imgUrlList+=this.imageUrl[i]+''
        }
        this.ruleForm.researchPictureList=imgUrlList
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5030',
          query:this.ruleForm
        })
          .then((res) => {
            if(res.data.data.RES=='00S'){
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success'
              });
              this.getData();
              $('#classManage').modal('hide')
            }else{
              this.$notify.error({
                title: '错误',
                message: '保存失败'
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '错误',
              message: '保存失败'
            });
          });
      },
      // 查看详情
      showDetail(id){
        this.id=id
        $('#detail').modal('show');
        this.newtagList=[]
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5040',
          query:{
            researchId:id
          }
        })
          .then((res) => {
            this.newtagList=[]
            this.imageUrl2=[]
            this.detail=res.data.data;
            this.ruleForm2.researchId=this.detail.researchId;
            this.ruleForm2.researchText=this.detail.researchText;
            for(var i in this.detail.tagList){
              this.newtagList.push(this.detail.tagList[i].researchTag)
            }
            for(var i in this.detail.pictureList){
              this.imageUrl2.push(this.detail.pictureList[i].pictureR)
            }
            this.getData()
          })
          .catch((error) => {
            this.detail={}
          });
      },
      // 删除调研
      deleteData(id){
        this.$confirm('此操作将删除该调研, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.GLOBAL.host,{
            method:'DataAc_API5080',
            query:{
              researchId:id
            }
          })
            .then((res) => {
              if(res.data.data.RES=='00S'){
                this.$notify({
                  title: '成功',
                  message: '删除成功',
                  type: 'success'
                });
                this.getData()
              }else{
                this.$notify.error({
                  title: '错误',
                  message: '删除失败'
                });
              }
            })
            .catch((error) => {
              this.$notify.error({
                title: '错误',
                message: '删除失败'
              });
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 标签列表
      tagList(){
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5090',
          query:this.formInline2
        })
          .then((res) => {
            this.tagTable=res.data.data
          })
          .catch((error) => {
           this.tagTable=[]
          });
      },
      // 单个标签
      oneTag(){
        this.$http.post(this.GLOBAL.host,{
          method:'getDictionary',
          query:{
            cnName:"数据采集_调研标签"
          }
        })
        .then((res) => {
          var tagTable=res.data.data.dictionary
          for(var i in tagTable){
            this.tagTable2.push(tagTable[i].entry)
          }
        })
        .catch((error) => {
          this.tagTable2=[]
        });
      },
      // 标签分类
      showTagType(tag){
        this.show=true;
        this.typeTag=tag
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API50100',
          query:{
            "researchTagList": tag,
            "startTime": this.formInline2.startTime,
            "endTime": this.formInline2.endTime,
            "researchType": this.formInline2.researchType,
            "picturesMark": this.formInline2.picturesMark
          }
        })
          .then((res) => {
            this.tableData2=res.data.data
          })
          .catch((error) => {
            this.tableData2=[]
          });
      },
      // 新增标签
      addTag(){
        $('#newTag').modal('show')
      },
      addTag2(){
        this.$prompt('请输入标签', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.+$/,
          inputErrorMessage: '标签不能为空'
        }).then(({ value }) => {
          this.$http.post(this.GLOBAL.host,{
            method:'DataAc_API5060',
            query:{"entry": value}
          })
          .then((res) => {
            if(res.data.data=='1'){
              this.$notify({
                title: '成功',
                message: '新增成功',
                type: 'success'
              });
              this.oneTag()
            }else{
              this.$notify.error({
                title: '错误',
                message: '新增失败'
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: '错误',
              message: '新增失败'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl.push(res.fileUrl) ;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpg';
        const isJPEG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isImg = file.type === isJPG||isJPEG||isPNG;
        const isLt2M = file.size / 1024 / 1024 < 2;
        if(!isImg){
          this.$notify({
            title: '提示',
            message: '只能上传图片格式!',
            type: 'error',
            duration:1000
          });
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isImg&&isLt2M;
      },
      removeImg(index){
        this.imageUrl.splice(index,1)
      },
      // 编辑
      edit(){
        this.imageUrl2=[]
        $('#detail').modal('hide');
        $('#edit').modal('show');
        this.ruleForm2.researchId=this.detail.researchId;
        this.ruleForm2.researchText=this.detail.researchText;
        for(var i in this.detail.pictureList){
          this.imageUrl2.push(this.detail.pictureList[i].pictureR)
        }

      },
      // 编辑后保存标签
      saveEdit(){
        this.ruleForm2.updateTag='NO'
        this.ruleForm2.researchTagList=this.newtagList.join(',')
        var imgUrlList=''
        for(var i in this.imageUrl2){
          imgUrlList+=this.imageUrl2[i]+''
        }
        if(imgUrlList.length==0){
          this.ruleForm2.updatePicture='NO'
        }else{
          this.ruleForm2.updatePicture='YES'
        }
        this.ruleForm2.researchPictureList=imgUrlList
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5070',
          query:this.ruleForm2
        })
        .then((res) => {
          if(res.data.data.RES=='00S'){
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            this.getData();
            $('#classManage').modal('hide')
          }else{
            this.$notify.error({
              title: '错误',
              message: '保存失败'
            });
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '保存失败'
          });
        });
      },
      saveEdit2(){
        this.ruleForm2.updatePicture='NO'
        this.ruleForm2.researchPictureList=''
        this.ruleForm2.updateTag='YES'
        this.ruleForm2.researchTagList=this.newtagList.join(',')
        this.$http.post(this.GLOBAL.host,{
          method:'DataAc_API5070',
          query:this.ruleForm2
        })
        .then((res) => {
          if(res.data.data.RES=='00S'){
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            });
            this.tagList();
            $('#newTag').modal('hide')
            this.showDetail(this.id)
          }else{
            this.$notify.error({
              title: '错误',
              message: '保存失败'
            });
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '保存失败'
          });
        });
      },
      handleAvatarSuccess2(res, file) {
        this.imageUrl2.push(res.fileUrl) ;
      },
      removeImg2(index){
        this.imageUrl2.splice(index,1)
      }
    }
  };
</script>
